<template>
  <!-- 下面是滑动的作者 -->
  <div class="container">
    <div class="slider">
      <div class="box" v-for="item in items" :key="item.author">
        <div class="avatar">
          <img :src="item.authorimage" alt="Avatar" />
        </div>
        <div class="text">
          <p>{{ item.author }}</p>
        </div>
      </div>
    </div>

    <!-- 下面是主播作品 -->
    <div class="zhubo" @touchmove.prevent>
      <div v-for="item in items" :key="item.author" class="part">
        <h3>{{ item.author }}</h3>
        <p style="margin: 2px">{{ item.introducion }}</p>
        <div
          class="geren"
          v-for="item1 in item.work"
          :key="item1.bookname"
          @click="onImageClick(item1)"
        >
         
          <div class="image">
            <img :src="item1.image" alt="图片" />
          </div>
          <div class="author">{{ item1.bookname }}</div>
          <div class="description" style="margin: 2px">
            {{ item1.bookauthor }}
          </div>
          <!-- </a> -->
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export  default{
  props: ["items"],
  methods:{
    onImageClick(row){
      this.$emit('click',row);
    }
  }
}

</script>
<style scoped>
a {
  text-decoration: none; /* 去除下划线 */
  color: inherit; /* 继承父元素的文本颜色 */
}

.zhuboo {
  clear: both;
  /* 禁用默认的滚动行为 */
  touch-action: none;
}
.part {
  border: 1px solid #ccc;
  margin-bottom: 2px;
  padding: 10px;
  margin-top: 8px;
  display: block;
  height: 240px;
  width: 100%;
}
.geren {
  float: left;
  margin-right: 15px;

  width: 110px;
}

.image img {
  width: 110px;
  height: 120px;
}

.author {
  font-weight: bold;
  margin-top: 10px;
}

.description {
  margin-top: 5px;
}
.slider {
  width: 100%;
  overflow-x: scroll;
  /* overflow-y:hidden; */
}
.slider::-webkit-scrollbar {
  width: 0; /* 隐藏滚动条宽度 */
  height: 0; /* 隐藏滚动条高度 */
  background: transparent; /* 隐藏滚动条背景 */
}
.slider {
  display: flex;
}

.box {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin: 0 10px;
}

.avatar img {
  width: 55px;
  height: 55px;
  border-radius: 50%;
}

.text {
  margin-top: 10px;
  text-align: center;
}
</style>



